<template>
	<view class="content">
		<navBar title="品鉴福利" :change="scrollChange" ref="navHeader"></navBar>
		<view class="header-bg" :style="'margin-top:-'+headerHeight+'px'">
			<image src="/static/miaojie/join_judge_bg.png" mode="widthFix" />
		</view>
		<view class="act-rule">规则</view>
		<view class="container">
			<view class="judge-card">
				<view class="card-user text-center">
					<image src="/static/missing-face.png"/>
					<view class="user-name">品鉴官</view>
				</view>
				<view class="card-title judge-title flex align-center justify-center">
					<image src="/static/miaojie/headline_judge.png"/>
					<text>品鉴官权益</text>
					<image src="/static/miaojie/headline_judge.png"/>
				</view>
				<view class="flex justify-around">
					<view class="card-list text-center">
						<image src="/static/icon/icon_foretaste.png"/>
						<view>免费试吃</view>
					</view>
					<view class="card-list text-center">
						<image src="/static/icon/icon_tryout.png"/>
						<view>免费试用</view>
					</view>
					<view class="card-list text-center">
						<image src="/static/icon/icon_demo.png"/>
						<view>免费试玩</view>
					</view>
				</view>
				<view class="card-text">每月严选商品 ◎ 包邮到家 ◎ 全年有效</view>
			</view>
			<view class="judge-duty">
				<view class="judge-title flex align-center justify-center">
					<image src="/static/miaojie/headline_judge.png"/>
					<text>品鉴官职责</text>
					<image src="/static/miaojie/headline_judge.png"/>
				</view>
				<view class="duty-text flex justify-around">
					<view class="flex align-center">
						<view class="circular"></view>
						<text>品鉴妙街严选商品</text>
					</view>
					<view class="flex align-center">
						<text class="circular"></text>
						<text>真情分享妙街APP</text>
					</view>
				</view>
			</view>
			<view class="judge-join">
				<view class="join-btn" @click="navTo('/pages/vip/privilege')">申请加入品鉴官</view>
			</view>
			<view class="judge-title flex align-center justify-center">
				<image src="/static/miaojie/headline_judge.png"/>
				<text>已送出品鉴福利</text>
				<image src="/static/miaojie/headline_judge.png"/>
			</view>
			<view class="judge-list flex justify-between flex-wrap">
				<view class="list" v-for="(item,index) in 3" :key="index">
					<view class="list-img">
						<image src="/static/demo.png" mode="widthFix" />
					</view>
					<view class="list-info text-center">
						<view class="info-title text-cut">新秀丽2018春夏新款</view>
						<view class="info-subtitle">已送出389件</view>
						<view class="info-price">
							<text>价值￥</text>
							888.00
						</view>
					</view>
				</view>
			</view>	

		</view>
	</view>
</template>

<script>
import Api from '@/common/api';
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
import navBar from "@/components/header-nav";
export default {
	components: {
		uniLoadMore,
		navBar
	},
	data() {
		return {
			headerHeight: 0,
			scrollChange: false,
		};
	},

	onLoad() {
		
	},
	onReady() {
			this.headerHeight = uni.getStorageSync('headerHeight');
	},
	onPageScroll(e) {
		if(e.scrollTop>this.headerHeight){
			this.scrollChange = true
		}else{
			this.scrollChange = false
		}
	},
	methods: {
		navTo(e) {
			uni.navigateTo({
				 url: e
			});
		}
	}
};
</script>

<style lang="scss">
page,
.content {
	background: $page-color-base;
	min-height: 100vh;
	position: relative;
	.header-bg{
		width: 100%;
		font-size: 0;
		image{
			width: 100%;
		}
	}
	.container{
		background: linear-gradient(to bottom,#6AE8E3,#fff);
		padding: 0 20upx 90upx;
		.judge-card{
			background: #fff;
			border-radius: 20upx;
			.card-user{
				display: flex;
				flex-direction: column;
				align-items: center;
				image{
					margin-top: -60upx;
					border-radius: 100%;
					border:6upx solid #91FFD9;
					width: 126upx;
					height: 126upx;
				}
				.user-name{
					z-index: 9999;
					margin-top: -20upx;
					display: inline-block;
					font-size: 24upx;
					color: #fff;
					text-align: center;
					padding: 8upx 30upx;
					border-radius: 21upx;
					background:linear-gradient(135deg,rgba(121,255,216,1) 0%,rgba(68,174,255,1) 100%);
				}
			}
			.card-title{
				margin-top: 30upx;
			}
			.card-list{
				padding: 35upx 0;
				image{
					width: 98upx;
					height: 98upx;
					margin-bottom: 15upx;
				}
				font-size: 26upx;
				font-weight: bold;
			}
			.card-text{
				text-align: center;
				font-size: 26upx;
				color: #666;
				padding-bottom: 38upx;
			}
		}
		.judge-duty{
			margin-top: 10upx;
			background: #fff;
			border-radius: 20upx;
			padding: 40upx 0;
			.judge-title{
				margin-top: 0;
				margin-bottom: 40upx;
			}
			.duty-text{
				.circular{
					width: 30upx;
					height: 30upx;
					border-radius: 20upx;
					border: 6upx solid #91FFD9;
					margin-right: 10upx;
				}
				font-size: 26upx;
			}
		}
		.judge-join{
			margin: 60upx 0;
			.join-btn{
				font-size: 36upx;
				font-weight: bold;
				color: #fff;
				text-align: center;
				background:linear-gradient(135deg,rgba(255,119,119,1) 0%,rgba(255,29,29,1) 100%);
				box-shadow:0px 3px 10px 0px rgba(255,59,70,0.64);
				padding: 26upx 0;
				border-radius: 44upx;
			}
		}
		.judge-title{
			image{
				width: 38upx;
				height: 52upx;
			}
			text{
				font-weight: bold;
				padding: 0 20upx;
				font-size: 36upx;
				color: #107972;
			}
		}
		.judge-list{
			margin-top: 30upx;
			.list{
				border-radius: 20upx;
				background: #fff;
				margin-bottom: 20upx;
				width: calc(50% - 10upx);
				.list-img{
					display: flex;
					align-items: center;
					justify-content: center;
					height: 340upx;
					image{
						max-width: 100%;
					}
				}
				.list-info{
					padding: 20upx 15upx 30upx;
					.info-title{
						font-size: 30upx;
						color: #333;
						font-weight: bold;
					}
					.info-subtitle{
						color: #999;
						font-size: 24upx;
						padding: 18upx 0;
					}
					.info-price{
						font-size: 32upx;
						font-weight: bold;
						color: #F94242;
						text{
							font-size: 22upx;
						}
					}
				}
			}
		}
		
	}

}


</style>
